<template>
	<view>
	<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback" >
		<view class="container">
			<view class="headinfo">
				<view class="avatar">
					<image class="headimg" :src="userinfo.avatar" mode="aspectFill"></image>
					<view class="glod">
						<view class="bigfongs">{{userinfo.integral}}<text>币</text></view>
						<text class="smallfonts">每日签到领取金币，连续签到领大礼</text>
					</view>
				</view>
				<view class="goldlist" @click="gotorecod">
					<image src="../../static/image/money-1.png"></image>
					<view>金币记录</view>
				</view>
			</view>

			<view class="container-item">
				<view class="contant-title">
					<view>已连续签到<text class="title-text">{{daycount}}</text>天</view>
					<view class="remind"><text>签到提醒</text>
						<switch :checked="signRemind" color="#04be02" @change="remind" />
					</view>
				</view>
				<view class="sign">
					<view class="sign-text">
						<view class="sign-lie" v-for="(item,index) in daylist" :key="index">
							<view class="sign-item">
								<view v-if="item.sign==1" class="watchvideo" @click="visible=true">
									<view class="sanjiao"></view>
									<view class="videotip">
										<view class="videoduble">视频翻倍</view>
										<view class="shipsanjiao"></view>
									</view>
								</view>
								<view v-else-if="item.sign==2" class="sign-success">
									<image src="../../static/image/refresh-ok.png" mode="aspectFill"></image>
								</view>
								<view v-else :class="['yuan',item.today==true?'sing-now':'']">+{{item.point}}</view>
								<view class="days">{{item.title}}</view>
							</view>
							<view class="line" v-if="index<6"></view>
						</view>
					</view>
					<view :class="['sign-botton',alreadySign?'already-sign':'']" @click="signnow">{{alreadySign?'已签到,继续努力':'立即签到'}}</view>
				</view>
			</view>

			<!--每日红包-->
			<view class="container-item">
				<view class="contant-title">
					<view>兑换红包</view>
					<view class="xianshi">每天<text>20</text>:<text>30</text>限量放出</view>
				</view>
				<limit-redbag ref="dayredbag" @getmember="getmember"></limit-redbag>
			</view>

			<!--福利任务-->
			<view class="container-item" v-if="welfaretask.length>0">
				<view class="contant-title">
					<view>福利任务</view>
				</view>
				<view class="task-item" v-for="(item,index) in welfaretask" :key="index">
					<view class="task-left">
						<view class="left-title">{{item.title}}</view>
						<view class="left-bottom">
							<image src="../../static/image/money-1.png" mode="aspectFill"></image>
							<text>金币+{{item.point}}</text>
						</view>
					</view>
					<view v-if="item.status==1" class="task-unreceive" @click="receive(item.id,index,'welfaretask',item.point)">
						待领取
					</view>
					<view v-else class="task-right" @click="goto_finishatask(item.action,item.uri)">
						<image src="../../static/image/money-1.png" mode="aspectFill"></image>
						<view class="get-gold">{{item.tip}}</view>
					</view>
				</view>
			</view>


			<!--每日任务-->
			<view class="container-item">
				<view class="contant-title">
					<view>每日任务</view>
				</view>
				<view class="task-item" v-for="(item,index) in daytask" :key="index" v-if="item.status<2">
					<view class="task-left">
						<view class="left-title">{{item.title}}</view>
						<view class="left-bottom">
							<image src="../../static/image/money-1.png" mode="aspectFill"></image>
							<text>金币+{{item.point}}</text>
						</view>
					</view>
					<view v-if="item.status==1" class="task-unreceive" @click="receive(item.id,index,'daytask',item.point)">
						待领取
					</view>
					<view v-else class="task-right" @click="goto_finishatask(item.action,item.uri)">
						<!-- 	<image src="../../static/image/money-1.png" mode="aspectFill"></image> -->
						<view class="get-gold">{{item.tip}}</view>
					</view>
				</view>
			</view>
			<!--特惠专区-->
			<!-- 	<view class="preferential">
				<text>特惠专享</text>
				<shop style="margin-top: 30rpx;"></shop>
			</view> -->
			<view class="fankui"><text @click="gotofeed">意见反馈</text><text class="lines">|</text><text @click="gotoglodrule">金币规则</text></view>
		</view>

		
	</mescroll-body>
	<!--获取金币提示-->
	<glodalert :visible="visible" :golds="golds" @watchvideo="watchvideo"></glodalert>
	
	<!--通知提示-->
	<alert :modeltitle="modeltitle" :visible="noticeshow" :isclosebutton="false">
		<view class="tipcontents">
			<text>{{noticemsg}}</text>
			<view class="openbutton" @click="noticeclosep">我知道了</view>
		</view>
	</alert>
	<!--加载遮罩-->
	<loadingpage v-if="globelloading"></loadingpage>
	</view>
</template>

<script>
	/**
	 * 每日签到
	 */
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				lock: false, //锁定
				globelloading: true,
				daylist: 7,
				welfaretask: [], //福利任务
				daytask: [], //每日任务
				daycount: 0,
				userinfo: '',
				signbuttontext: '立即签到',
				visible: false,
				golds: 0, //弹出金币金额
				alreadySign: false, //是否已签到 
				buttontitle: false, //false为看视频 true为收下金币
				noticemsg: '', //通知提示内容
				modeltitle: '',
				noticeshow: false, //签到通知提醒显示
				signRemind: false, //签到提醒
				downOption: {
					auto: true, //是否在初始化后,自动执行downCallback; 默认true
					textColor: "#fff",
					textLoading: '玩命加载中...',
					outOffsetRate: 0,
					autoShowLoading: true, //自动执行一次下来 
					textSuccess: "刷新成功",
				},
				//上拉参数配置
				upOption: {
					use: false
				},
			}
		},
		onLoad(option) {
			uni.$on("closewindown", (option) => {
				//关闭alret提示框
				this.visible = option;
				console.log('活动页面触发')
				this.noticeshow = option
			})
		
			//更新app图标红点
			this.$redpoint(option);
		},
		onUnload() {
			uni.$off()
		},
		watch: {
			daylist() {
				this.globelloading = false;
			}
		},
		methods: {
			downCallback() { 
				this.getmember(); //获取用户信息
				this.getinfodata();
				this.getdayrb(); //每日红包数据
			},
			//去记录
			gotorecod() {
				//判断是否需要登陆
				if (this.$Logintip()) {
					this.$Userlogin()
					return
				}
				uni.navigateTo({
					url: "/pages/activity/goldinfo"
				})
			},
			//触发事件完成任务
			goto_finishatask(action, url) {
				let _this = this
				//判断是否需要登陆
				if (this.$Logintip()) {
					this.$Userlogin()
					return
				}
				console.log(action)
				switch (parseInt(action)) {
					case 1:
						uni.switchTab({
							url: url
						})
						break;
					case 2:
						//观看视频奖励
						_this.$ttylAd.show(_this.$common.state.adpid, (res) => {
							if (res && res.isEnded) {
								_this.$rewardAd().then(res => {
									//成功添加播放记录刷新列表
									_this.$ShowMsg('观看次数+1')
									_this.getinfodata();
								}).catch(error => {
									console.log('error::' + error)
								})
								// 正常播放结束
								console.log("onClose " + res.isEnded);
							} else {
								// 播放中途退出
								console.log("onClose " + res.isEnded);
							}
						}, (err) => {
							console.log(err) // {code: code, errMsg: message}
							this.$ShowMsg('状态异常', 'error')
						})
						break;
					case 3:
						uni.share({
							provider: "weixin",
							scene: "WXSceneSession",
							type: 0,
							href: getApp().globalData.ruleconfig.domain+"thirdParty/app/invite?state=" + _this.userinfo.recommend_id,
							title: '【' + _this.userinfo.nickname + '】' + '@你参与免费抽奖',
							summary: '天天有礼拥有众多商家提供的各类精美奖品，所有用户均可免费参与抽奖，中奖后的用户即可获得对应奖品',
							imageUrl: 'https://fission-com.oss-cn-beijing.aliyuncs.com/rg-static/image/logo/72x72.png',
							success: function(res) {
								_this.$HttRequest({
									url: '/task/share',
									param: ''
								}).then((res) => {
									if (res.status === 10000) {
										_this.getinfodata();
										_this.$ShowMsg('分享朋友朋友或群成功！')
									}
								}).catch((error) => {
									//异常错误
									_this.$ShowMsg('statusCode：' + error);
									console.log(error);
								})
							},
							fail: function(err) {
								console.log(err);
								_this.$ShowMsg('分享朋友失败！')
							}
						})
						break;
					case 4:
						//plus.runtime.openURL('')  
						// console.log(111) 
						// storeKit.review()
						uni.navigateTo({
							url:'/pages/activity/score'
						})
						break; 
				}
				// if(action==1){
				// 	uni.switchTab({
				// 		url: url
				// 	})
				// }else if(action==3){
				// 	let _this = this;
				// 	uni.share({
				// 		provider: "weixin",
				// 		scene: "WXSceneSession",
				// 		type: 0,
				// 		href: "https://recharge.607068.com/thirdParty/app/invite?state=" + _this.userinfo.recommend_id,
				// 		title: '【' + _this.userinfo.nickname + '】' + '@你参与免费抽奖',
				// 		summary: '天天有礼拥有众多商家提供的各类精美奖品，所有用户均可免费参与抽奖，中奖后的用户即可获得对应奖品',
				// 		imageUrl: 'https://fission-com.oss-cn-beijing.aliyuncs.com/rg-static/image/logo/72x72.png',
				// 		success: function(res) {
				// 			_this.$HttRequest({
				// 				url: '/task/share',
				// 				param: ''
				// 			}).then((res) => {
				// 				if (res.status === 10000) {
				// 					_this.getinfodata();
				// 					_this.$ShowMsg('分享朋友朋友或群成功！')
				// 				}
				// 			}).catch((error) => {
				// 				//异常错误
				// 				_this.$ShowMsg('statusCode：' + error);
				// 				console.log(error);
				// 			})
				// 		},
				// 		fail: function(err) {
				// 			console.log(err);
				// 			_this.$ShowMsg('分享朋友失败！')
				// 		}
				// 	})
				// }else if(action==2){
				// 	//观看视频奖励
				// 	_this.$ttylAd.show(_this.$common.state.adpid, (res) => {
				// 		if (res && res.isEnded) {
				// 			_this.$rewardAd().then(res=>{
				// 				//成功添加播放记录刷新列表
				// 				_this.$ShowMsg('观看次数+1')
				// 				_this.getinfodata();
				// 			}).catch(error=>{
				// 				console.log('error::'+error)
				// 			})
				// 			// 正常播放结束
				// 			console.log("onClose " + res.isEnded);
				// 		} else {
				// 			// 播放中途退出
				// 			console.log("onClose " + res.isEnded);
				// 		}
				// 	}, (err) => {
				// 		console.log(err) // {code: code, errMsg: message}
				// 		this.$ShowMsg('状态异常','error') 
				// 	})
				// }
			},


			gotofeed() {
				//判断是否需要登陆
				if (this.$Logintip()) {
					this.$Userlogin()
					return
				}
				uni.navigateTo({
					url: '/pages/proposal/feedback',
				})
			},
			gotoglodrule() {
				uni.navigateTo({
					url: '/pages/article/index?key=5f485e933e5ae',
				})
			},
			//获取用户信息
			getmember() {
				let user_info = uni.getStorageSync('user_info')
				this.userinfo = user_info ? user_info : this.$Initdata
			},

			//观看视频
			watchvideo() {
				this.$ttylAd.show(this.$common.state.adpid, (res) => {
					console.log(res)
					if (res && res.isEnded) {
						this.video_doubling()
						// 正常播放结束
						console.log("onClose " + res.isEnded);
					} else {
						// 播放中途退出
						console.log("onClose " + res.isEnded);
					}
				}, (err) => {
					console.log(err) // {code: code, errMsg: message}
					this.$ShowMsg('状态异常', 'error')
				})
			},

			//获取金币翻倍奖励
			video_doubling() {
				this.$HttRequest({
					url: '/signIn/lookAd',
					param: ''
				}).then((res) => {
					if (res.status === 10000) {
						this.daylist = res.data.list;
						this.visible = false;
						this.$ShowMsg('完成视频观看任务，金币+' + this.golds);
						//修改内存中金币
						this.accumulationgold(this.golds);
						//激励广告成功奖励
						this.$rewardAd()
					} else {
						this.$ShowMsg(res.message);
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error.errMsg);
				})
			},

			//获取单日是否已签到
			checkin(daylist) {
				let date = new Date();
				daylist.forEach((item, index) => {
					//执行当天签到
					if (item.date == date.getDate()) {
						if (item.sign >= 1) {
							this.alreadySign = true;
							this.golds = item.point;
						}
					}
				})
				// console.log(this.alreadySign);
			},

			//用户签到
			signnow() {
				//判断是否需要登陆
				if (this.$Logintip()) {
					this.$Userlogin()
					return
				}
				if (this.alreadySign) {
					this.$ShowMsg('今日已签到，请明天再来吧！')
				} else {
					//去签到
					this.$HttRequest({
						url: '/signIn/signIn',
						param: ''
					}).then((res) => {
						//console.log(res);
						if (res.status === 10000) {
							res.data.list.forEach((item, index) => {
								if (item.today) {
									this.golds = item.point; //获取当天签到金币
									this.visible = true;
									this.alreadySign = true, //已签到字段						
										this.daycount = res.data.count;
									this.daylist = res.data.list;
									//修改内存中金币
									this.accumulationgold(item.point);
								}
							});
						} else {
							this.$ShowMsg(res.message);
							//console.log(res.message);
						}
					}).catch((error) => {
						//异常错误
						this.$ShowMsg('statusCode：' + error.errMsg);
					})
				}
			},
			accumulationgold(glods) {
				//累加金币
				let strongglod = parseInt(this.userinfo.integral) + parseInt(glods);
				this.$changefield('integral', strongglod).then(ret => {
					if (ret) {
						this.userinfo = uni.getStorageSync('user_info');
					}
				}).catch(erro => {
					this.$ShowMsg(erro)
				});
			},

			//领取金币
			receive(id, index, type, glods) {
				if (this.lock) {
					return
				}
				this.lock = true;
				this.$HttRequest({
					url: '/task/receive',
					param: {
						id: id
					}
				}).then((res) => {
					if (res.status === 10000) {
						console.log(res);
						if (type == "welfaretask") {
							this.welfaretask.splice(index, 1);
						} else if (type == "daytask") {
							this.daytask.splice(index, 1);
						}
						//更新用户缓存
						try {
							let cacheuserinfo = uni.getStorageSync('user_info');
							cacheuserinfo.money = res.data.money;
							cacheuserinfo.integral = res.data.integral;
							this.userinfo = cacheuserinfo;
							uni.setStorageSync('user_info', cacheuserinfo);
							this.$ShowMsg('金币+' + glods);
						} catch (e) {
							console.log(e);
						}
						this.lock = false;
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error.errMsg);
				});

				//	console.log('领取金币');
			},
			//获取每日领取红包数据
			getdayrb() {
				this.$nextTick(() => {
					this.$refs.dayredbag.getdayredbag();
				});
			},

			//获取签到详情
			getinfodata() {
				this.$HttRequest({
					url: '/signIn/lists',
					param: ''
				}).then((res) => {
					if (res.status === 10000) {
						console.log(res);
						//获取当天是否已签到数组
						this.checkin(res.data.list.list);
						this.daycount = res.data.list.count;
						this.daylist = res.data.list.list;
						this.welfaretask = res.data.welfareLists; //福利任务
						this.daytask = res.data.task; //每日任务
						this.signRemind = res.data.list.signRemind; //是否预约签到提醒
						this.mescroll.endSuccess();
						//console.log(this.welfaretask);
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error.errMsg);
				});
			},

			//开启和关闭签到提醒
			remind(e) {
				//判断是否需要登陆
				if (this.$Logintip()) {
					this.$Userlogin()
					return
				}
				this.$HttRequest({
					url: '/setting/signRemind',
					param: {
						remind: e.target.value
					}
				}, 'POST').then((res) => {
					if (res.status === 10000) {
						if (e.target.value) {
							this.modeltitle = '预约签到成功';
							this.noticemsg = '温馨提示：请在手机设置中选择[通知管理]找到天天有礼app开启通知，如已开启天天有礼APP通知可以忽略此条提示';
							//刷新列表
							this.getinfodata()
						} else {
							this.modeltitle = '预约签到已取消';
							this.noticemsg = '取消天天有礼APP通知，将不再推送每日签到提醒通知！';
						}
						this.noticeshow = true;
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error.errMsg);
				})
			},
			//关闭常见问题弹窗
			noticeclosep() {
				this.noticeshow = false;
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f0f0;
		background-image: url(../../static/image/active_bg.png);
		background-position: left top;
		background-repeat: no-repeat;
		background-size: 100% 246rpx; 
	}


	.tipcontents {
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;

		text {
			line-height: 50rpx;
		}

		.openbutton {
			color: #fff;
			font-size: 30rpx;
			margin: 20rpx auto;
			margin-top: 30rpx;
			background-color: #02c867;
			width: 100%;
			display: flex;
			justify-content: center;
			height: 85rpx;
			border-radius: 20rpx;
			align-items: center;
		}
	}

	.preferential {
		font-size: 35rpx;

		text {
			font-weight: bold;
			margin-left: 20rpx;

		}
	}

	.fankui {
		height: 100rpx;
		color: #b9b9b9;
		font-size: 28rpx;
		display: flex;
		width: 100vw;
		justify-content: center;
		align-items: center;

		.lines {
			margin: 0 20rpx;
		}
	}

	.task-item {
		width: 93%;
		margin: 20rpx auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 22rpx;
		color: #fa8b0b;

		.task-left {
			display: flex;
			justify-content: center;
			align-items: flex-start;
			flex-direction: column;

			.left-title {
				color: #333333;
				font-size: 30rpx;
			}

			.left-bottom {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 10rpx;

				text {
					font-size: 25rpx;
				}

				image {
					margin-right: 5rpx;
					width: 25rpx;
					height: 25rpx;
				}

			}
		}

		.task-unreceive {
			background-color: #fa8600;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 160rpx;
			height: 65rpx;
			border-radius: 40rpx;
			color: #fff;
			font-size: 27rpx;
			font-weight: bold;
		}

		.task-right {
			background-color: #02c867;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 160rpx;
			height: 65rpx;
			border-radius: 40rpx;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}

			.get-gold {
				color: #fff;
				font-size: 24rpx;
				font-weight: bold;
			}
		}
	}

	.sign {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.sign-text {
			display: flex;
			justify-content: center;
			align-items: center;

			.sign-lie {

				display: flex;
				justify-content: center;
				align-items: center;

				.sign-item {
					color: #727482;
					font-size: 24rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					margin-top: 15rpx;

					//观看视频按钮
					.watchvideo {
						position: relative;
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						background: linear-gradient(#fdaa64, #fa8753);
						display: flex;
						justify-content: center;
						align-items: center;

						.sanjiao {
							width: 0;
							height: 0;
							border-left: 15rpx solid #fff;
							border-top: 10rpx solid transparent;
							border-bottom: 10rpx solid transparent;
							margin-left: 5rpx;
							// width: 0;
							//   height: 0;
							//   border-top: 50px solid transparent;
							//   border-left: 100px solid red;
							//   border-bottom: 50px solid transparent;
						}

						.videotip {
							top: -40rpx;
							left: -10rpx;
							position: absolute;
							width: 85rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							flex-direction: column;
							animation: updown 2s infinite;

							.videoduble {
								width: 85rpx;
								color: #fff;
								font-size: 18rpx;
								background-color: #fa8600;
								padding: 5rpx;
								text-align: center;
								border-radius: 10rpx;

							}

							.shipsanjiao {
								width: 0;
								height: 0;
								border-top: 8rpx solid #fa8600;
								border-left: 10rpx solid transparent;
								border-right: 10rpx solid transparent;
							}
						}

					}

					.sign-success {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						background-color: #82ddb1;
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 40rpx;
							height: 40rpx;
						}
					}

					.yuan {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						background-color: #edeef5;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.sing-now {
						background: linear-gradient(#21e082, #02c867);
						color: #fff;
					}

					.days {
						margin: 10rpx 0;
						font-size: 22rpx;
					}
				}

				.line {
					width: 40rpx;
					height: 30rpx;
					border-top: 1rpx solid #edeef5;
				}
			}

		}

		.sign-botton {
			background-color: #02c867;
			color: #fff;
			font-weight: bold;
			width: 680rpx;
			height: 60rpx;
			border-radius: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			margin: 20rpx 0;
			padding: 10rpx 0;
		}

		.already-sign {
			background-color: #82ddb1;
		}
	}

	.bigfongs {
		font-size: 48rpx;
		font-weight: bold;

		text {
			margin-left: 8rpx;
			font-size: 18rpx;
			font-weight: bold;
		}
	}

	switch {
		transform: scale(0.5);
	}

	.remind {
		color: #b1b1b1;
		font-weight: normal;
		font-size: 20rpx;
	}

	.title-text {
		color: #fa8600;
	}

	.smallfonts {
		color: #c0c4d9;
		font-size: 22rpx;
	}

	.headimg {
		width: 105rpx;
		height: 105rpx;
		border-radius: 50%;
		border: 1rpx solid #fff;
		margin-right: 20rpx;
	}

	.headinfo {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 92%;
		margin: 0 auto;
		margin-bottom: 35rpx;

		.goldlist {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 120rpx;
			height: 100rpx;
			border-radius: 10rpx;
			background-color: #484c61;
			color: #dccdc3;
			font-size: 18rpx;
			font-weight: bold;

			image {
				width: 35rpx;
				height: 35rpx;
				margin-top: 15rpx;
				margin-bottom: 5rpx;
			}
		}

		.avatar {
			display: flex;
			justify-content: center;
			align-items: center;

			.glod {
				font-size: 25rpx;
				color: #fff;
			}
		}
	}

	

	.xianshi {
		font-size: 25rpx;
		color: #ed6b5b;
		display: flex;
		font-weight: normal;
		justify-content: center;
		align-items: center;

		text {
			margin: 0 10rpx;
			color: #fff;
			padding: 6rpx;
			font-size: 27rpx;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #ed6b5b;
		}
	}

	.container {
		// position: absolute;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100vw;
		top: 0;
		left: 0;

		.container-item {
			width: 93%;
			margin: 0 auto;
			display: flex;
			flex-direction: column;
			justify-content: center;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 10rpx;
			margin-bottom: 30rpx;

			.contant-title {
				width: 92%;
				margin: 0 auto;
				margin-bottom: 20rpx;
				font-weight: bold;
				font-size: 35rpx;
				border-bottom: 1rpx solid #f0f0f0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 100rpx;
			}
		}
	}

	//动画开始
	@keyframes updown {
		0% {
			top: -40rpx;
		}

		50% {
			top: -50rpx
		}

		100% {
			top: -40rpx;
		}
	}
</style>
